import {billGraph, billTypeGraph} from "./graph.mjs";
import {data} from './data.mjs'
import {useState} from "react";

export function TypeGraph() {
  const types = billTypeGraph.edges[data.curObject.id]

  return (
    <div style={{display: 'flex', flexDirection: 'row'}}>
      <Item t={data.curObject.id}>主单据</Item>
      {types.map((t, i) => {
        return (
          <TypeCard key={i} t={t}/>
        )
      })}
    </div>
  )
}

/**
 *
 * @param {{t: string, children: JSX.Element}} props
 * @returns {JSX.Element}
 * @constructor
 */
function Item(props) {
  const [open, setOpen] = useState(false)
  return (
    <div style={{border: '1px solid red', padding: '0 10px'}}>
      <p>{props.t} {props.children}</p>
      <div>
        <button onClick={ () => setOpen(!open)}>{open ? '收起' : '展开'}</button>
        {open && (
          <div>
            {billTypeGraph.edges[props.t].map((bill, i) => {
              return (
                <BillCard key={i} t={bill} />
              )
            })}
          </div>
        )}
      </div>
    </div>
  )
}

function TypeCard(props) {
  return (
    <Item t={props.t}>
      <span>{billTypeGraph.edges[props.t]?.length}</span>
    </Item>
  )
}

function BillCard(props) {
  const [down, setDown] = useState(false)

  return (
    <div style={{border: '1px solid green', padding: '0 10px'}}>
      <p>{props.t}</p>
      <div>
        <button>up</button>
        <button onClick={() => setDown(!down)}>down {down ? '收起' : billGraph.edges[props.t]?.length}</button>
        {down && (
          <div>
            {billGraph.edges[props.t]?.map((bill, i) => {
              return (
                <BillCard key={i} t={bill} />
              )
            })}
          </div>
        )}
        {/*<button>up_all</button>*/}
        {/*<button>down_all</button>*/}
      </div>
    </div>
  )
}